<template>
    <div>
        <div style="display: flex; justify-content: center; align-items: center;">
            <el-form :inline="true" :model="formInline" label-width="100px">
              <el-form-item label="退货单号：">
                <el-input v-model="formInline.Number" placeholder="请输入" style="width: 150px;"></el-input>
              </el-form-item>
              <el-form-item label="单据状态">
                <el-select v-model="formInline.Status" placeholder="请选择" style="width: 150px;">
                  <el-option label="待审核" value="待审核"></el-option>
                  <el-option label="已审核" value="已审核"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="客户名称">
                <el-select v-model="formInline.Kehu" placeholder="请选择" style="width: 150px;">
                    <el-option
             v-for="item in Khname"
            :key="item.s_CuNumber"
            :label="item.s_CuName"
            :value="item.s_CuName">
          </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="退货日期">
                <el-date-picker v-model="formInline.date" type="date" placeholder="选择日期" style="width: 120px;"></el-date-picker>
                至
                <el-date-picker v-model="formInline.date1" type="date" placeholder="选择日期" style="width: 120px;"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchData">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button  @click="chongzhi">重置</el-button>
              </el-form-item>
            </el-form>
          </div >

          <div style="display: flex;">
            <div style="width: 90px;">
              <el-button type="primary" @click="handleAdd">新增</el-button>
            </div>
            <div style="width: 90px;">
              <el-button type="primary" @click="handleShen">审核</el-button>
            </div>
            <div style="width: 90px;">
              <el-button type="primary" @click="handleDel">删除</el-button>
            </div> 
          </div>

          <div style="overflow-x: auto;">
            <el-table :data="data" style="width: 100%" class="dataTable"  @selection-change="handleSelectionChangeDel">
                
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="s_RIndex" label="序号"></el-table-column>
              <el-table-column prop="s_RReturnOrder" label="退货单号"></el-table-column>
              <el-table-column prop="s_RDocumentStatus" label="单据状态">
                <template slot-scope="scope">
                  <span :style="{ color: getStatusColor(scope.row.s_RDocumentStatus) }">
                    {{ scope.row.s_RDocumentStatus }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="退货日期">
                <template slot-scope='scope'>
                  <span>{{ filterTime(scope.row.s_RReturnDate) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="s_RSalesOrder" label="销售单号"></el-table-column>
              <el-table-column prop="s_RContactPerson" label="联系人"></el-table-column>
              <el-table-column prop="s_RContactInformation" label="联系方式"></el-table-column>
              <el-table-column prop="s_RSalesDepartment" label="销售部门"></el-table-column>
              <el-table-column prop="s_RSalesRepresentative" label="销售负责人"></el-table-column>
              <el-table-column prop="s_RReturnQuantity" label="退货数量"></el-table-column>
              <el-table-column prop="s_RReturnAmount" label="退货金额"></el-table-column>
              <el-table-column prop="s_RReturnedItems" label="退货货品"></el-table-column>
              <el-table-column prop="s_RCreator" label="制单人"></el-table-column>
              <el-table-column prop="s_RDepartment" label="所在部门"></el-table-column>
              <el-table-column label="制单时间">
                <template slot-scope='scope'>
                  <span>{{ filterTime(scope.row.s_RCreationTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="s_RApprover" label="审核人"></el-table-column>
              <el-table-column label="审核时间">
                <template slot-scope='scope'>
                  <span>{{ filterTime(scope.row.s_RApproverTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <!-- <el-button @click="XsUpd(scope.row)" type="text">编辑</el-button> -->
                  <el-button 
                  @click="XsUpd(scope.row)" 
                  type="text"
                  :disabled="scope.row.s_RDocumentStatus === '已审核'" 
                >
                  编辑
                </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          
              <el-pagination v-on:size-change="handleSizeChange"
              v-on:current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="rows">
  </el-pagination>

  <el-dialog
  title="退货新增"
  :visible.sync="thqx"
  :size="'auto'"
>
<h3>基础信息</h3>
<el-form  ref="AddForm" :model="AddForm" :rules="rules" label-width="100px" >
  <el-row>
    <el-col :span="12">
      <el-form-item label="退货单号">
        <el-input  v-model="AddForm.thindex" placeholder="自动获取系统编号" style="width: 200px;" disabled readonly />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="退货日期" prop="thdate">
        <el-date-picker style="width: 200px;"
        v-model="AddForm.thdate"
          type="date"
          format="yyyy-MM-dd"
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="关联销售单号">
        <el-input v-model="AddForm.thdh" placeholder="请输入" style="width: 200px;">
          <template  v-slot:append>
            <el-button @click="openModal">...</el-button>
          </template>
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="客户名称" prop="thgys">
        <el-input v-model="AddForm.thgys" placeholder="请输入" style="width: 200px;" readonly/>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="联系人" prop="thlxr">
        <el-input v-model="AddForm.thlxr" placeholder="请输入" style="width: 200px;" readonly/>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="联系方式" prop="thphone">
        <el-input v-model="AddForm.thphone" placeholder="请输入" style="width: 200px;" readonly/>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="销售部门" prop="thbm">
        <el-input v-model="AddForm.thbm" placeholder="请输入" style="width: 200px;" />
      </el-form-item>
      
    </el-col>
    <el-col :span="12">
      <el-form-item label="销售负责人" prop="thr">
        <el-input v-model="AddForm.thr" placeholder="请输入" style="width: 200px;" />
      </el-form-item>
      
    </el-col>
    <el-col :span="12">
      <el-form-item label="退货原因" prop="thyy">
        <el-input v-model="AddForm.thyy" placeholder="请输入" style="width: 200px;" />
      </el-form-item>
      
    </el-col>
   
    <el-col :span="24">
      <el-form-item label="备注">
        <el-input v-model="AddForm.thbz"  placeholder="请输入"/>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>
  <h3>销售退货明细</h3>
  <div style="width: 70px;">
    <!-- 添加按钮 -->
    <el-button type="primary" @click="MxAdd" style="font-size: 10px;">添加</el-button> 
  </div>
  <div style="overflow-x: auto;">
    <el-table :data="thmxdata" style="width: 100%" class="dataTable">
      <el-table-column prop="sr_SerialNumber" label="序号"  ></el-table-column>
      <el-table-column prop="sr_ProductName" label="货品名称"></el-table-column>
      <el-table-column prop="sr_ProductCode" label="货品编号"></el-table-column>
      <el-table-column prop="sr_ProductType" label="货品类型"></el-table-column>
      <el-table-column prop="sr_Specification" label="规格型号"></el-table-column>
      <el-table-column prop="sr_Unit" label="单位"></el-table-column>
      <el-table-column prop="sr_SalesQuantity" label="销售数量"></el-table-column>
     
      <el-table-column  label="本次退货数量">
        <template slot-scope="scope">
          <el-input v-model="scope.row.sr_ReturnQuantity" placeholder="请输入" @blur="checkQuantity(scope.row)"></el-input>
          
        </template>
      </el-table-column>
      <el-table-column  label="销售单价" prop="sr_UnitPrice">
      </el-table-column>
      <el-table-column  label="退货金额">
        <template slot-scope="scope">
          {{ (scope.row.sr_UnitPrice || 0) * (scope.row.sr_ReturnQuantity || 0) }}
        </template>
      </el-table-column>
      <el-table-column  label="备注">
        <template slot-scope="scope">
          <el-input v-model="scope.row.sr_Remarks" placeholder="请输入"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="showDispose(scope.row)" type="text">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
    合计&nbsp;&nbsp;&nbsp;退货数量：{{ totalQuantity }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;退货总金额：{{ totalAmount }}
    </div>
  </div>
  <h3>上传附件</h3>
  <div>  
    <el-upload
    class="upload-demo"
    :action="getUploadUrl()"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-upload="beforeUpload"
    multiple
    :file-list="fileList">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过200MB</div>
  </el-upload>
  </div>  
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取消</el-button>
    <el-button @click="rhsaveData">保存</el-button>
    
  </span>
</el-dialog>

<!-- 模态框 -->
<el-dialog :visible.sync="modalVisible" title="选择销售单">
    <!-- 模态框内容 -->
    <div style="overflow-x: auto;">
      <el-table ref="Xsname" :data="Xsname" style="width: 100%" class="dataTable" @selection-change="handleSelectionChange1"> 
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="s_OIndex" label="序号"></el-table-column>
        <el-table-column prop="s_OSalesOrder" label="销售单号"></el-table-column>
        <el-table-column prop="s_ODocumentStatus" label="单据状态"></el-table-column>
        <el-table-column prop="s_OSalesDate" label="销售日期"></el-table-column>
        <el-table-column prop="s_OCustomerName" label="客户名称"></el-table-column>
        <el-table-column prop="s_OSalesDepartment" label="销售部门"></el-table-column>
        <el-table-column prop="s_OSalesRepresentative" label="销售负责人"></el-table-column>
        <el-table-column prop="s_OQuantitySold" label="货品数量"></el-table-column>
        <el-table-column prop="s_OSalesAmount" label="销售金额"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modalVisible = false">取消</el-button>
        <el-button @click="JhgysForm">确认</el-button>
      </span>  
    </div>
    <!-- 这里放置模态框的内容 -->
  </el-dialog>

  <el-dialog
  title="添加货品"
  :visible.sync="tjhp"
  :size="'auto'"
  >
  <div style="overflow-x: auto;">
    <el-table ref="tableName" :data="xsdata" style="width: 100%" class="dataTable" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="s_DSerialNumber" label="序号"></el-table-column>
      <el-table-column prop="s_DProductName" label="货品名称"></el-table-column>
      <el-table-column prop="s_DProductNumber" label="货品编号"></el-table-column>
      <el-table-column prop="s_DSpecifications" label="规格型号"></el-table-column>
      <el-table-column prop="s_DProductType" label="货品类型"></el-table-column>
      <el-table-column prop="s_DUnit" label="单位"></el-table-column>
      <el-table-column prop="s_DUnitPrice" label="销售单价"></el-table-column>
      <el-table-column prop="s_DQuantitySold" label="销售数量"></el-table-column>
      <el-table-column prop="s_DSalesAmount" label="销售金额"></el-table-column>
      <el-table-column prop="s_DSaCode" label="关联销售订单编号"></el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="tjhp = false">取消</el-button>
      <el-button @click="hpForm">确认</el-button>
    </span>  
  </div>
  </el-dialog>

  <el-dialog
title="审核"
:visible.sync="shenhe"
:size="'auto'"
>

<el-form ref="ShenForm" :model="ShenForm" label-width="100px" >
<el-row>
  <el-col :span="12">
    <el-form-item label="编号" v-if="!isHidden">
      <el-input v-model="ShenForm.bh1" placeholder="请输入" style="width: 200px;" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="审核结果">
      <el-radio-group v-model="ShenForm.jieguo">
        <el-radio label="通过">通过</el-radio>
        <el-radio label="驳回">驳回</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-col>
 
  <el-col :span="24">
    <el-form-item label="审核意见">
      <el-input v-model="ShenForm.yijian" placeholder="请输入"/>
    </el-form-item>
  </el-col>
</el-row>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="shenhe= false">取消</el-button>
    <el-button @click="ShenData">确认</el-button>
    
  </span>
</el-dialog>
    </div>
</template>

<script>
import $http from '../router/base.js';
import { MessageBox } from 'element-ui';
export default {
    data() {
        return {
          thmxdata:[],
          tjhp:false,
          xsdata:[],
            Xsname:[],
            modalVisible:false,
            thqx:false,
            data:[],
            currentPage: 1,
      pageSize: 10,
      rows: 0, // 数据总条数
            Khname:[],
            formInline: {//分页查询的条件
            Number: '',
            Status: '',
            Kehu:'',
            date:'',
            date1:'',
        },
         // 选中的序号数组
         isHidden: true, // 控制文本框显示与隐藏的变量
        shenhe:false,//审核的模态框
        // 选中的序号数组
        selectedIds: [],
        selectedPOIndex:'',
        ShenForm:{
        bh1:'',
        jieguo:'',
        yijian:''
      },
        fileList:[],
        AddForm:{
          thindex:'',
          thdate:'',
          thdh:'',
          thgys:'',
          thlxr:'',
          thphone:'',
          thbm:'',
          thr:'',
          thyy:'',
          thbz:''
        },

        rules: {
  thphone: [
    { required: true, message: '请输入联系方式', trigger: 'blur' },
    { pattern: /^[0-9]{11}$/, message: '联系方式必须为11位数字', trigger: 'blur' }
  ],
  thdate: [
    { required: true, message: '请输入日期', trigger: 'blur' },
  ],
  thgys: [
    { required: true, message: '请选择供应商', trigger: 'blur' },
  ],
  thlxr: [
    { required: true, message: '请输入联系人', trigger: 'blur' },
  ],
  thbm: [
    { required: true, message: '请选择部门', trigger: 'blur' },
  ],
  thr: [
    { required: true, message: '请选择进货人', trigger: 'blur' },
  ],
  thyy: [
    { required: true, message: '请输入退货原因', trigger: 'blur' },
  ],

},
     selectedRows: [], // 选中的行数据
     // 定义状态对应的颜色映射关系
     orderNumber:'',
        }
    },
    methods:{
      getStatusColor(status) {
      const statusColorMap = {
        '已审核': 'green',
        '待审核': 'red',
    
      };
      return statusColorMap[status];
    },
    generateCode() {
      // 生成随机大写字母
      const randomLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));

      // 生成当前日期
      const currentDate = new Date().toISOString().slice(0, 10).replace(/-/g, '');

      // 生成4个随机数字
      const randomDigits = Math.floor(1000 + Math.random() * 9000);

      // 组合成编号
      return randomLetter + currentDate + randomDigits;
    },
       //审核
       ShenData(){
      $http.put(`api/Salesreturn/XsShen?to=${this.ShenForm.jieguo}`, {
        s_RIndex: this.ShenForm.bh1,
        p_Reviewcomments: this.ShenForm.yijian,
       
}).then(res => {
  if (res) {
    this.$message({
      message: '审核成功！',
      type: 'success'
    });
     this.ShenForm.jieguo="";
     this.ShenForm.yijian="";
    this.shenhe = false;
    this.searchData(); // 重新填充销售机会列表
  }
})
.catch(err => {
  this.$message({
    message: '审核失败！',
    type: 'error'
  });
});

    },

      handleShen(){
      this.shenhe=true;
      this.ShenForm.bh1=this.selectedPOIndex;

      },
       //批量删除
  handleDel() {
    const hasUnstoredData = this.selectedRows.some(row => row.s_RDocumentStatus === '已审核' );
  if (!hasUnstoredData) {
    MessageBox.confirm('存在未入库的数据，确定删除所选单据？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 执行删除操作的逻辑
      $http.delete('api/Salesreturn/XsDel', {
        data: this.selectedIds
      })
      .then(response => {
        this.$message({
          message: '删除成功！',
          type: 'success'
        });
        this.Qu();
        this.searchData();
      })
      .catch(error => {
        this.$message({
          message: '删除失败！',
          type: 'error'
        });
      });
    }).catch(() => {
      // 用户点击取消按钮时执行的操作，这里不需要执行任何操作
    });
  } else {
    this.$message.warning('无法删除已审核的数据');
  }
  },
              // 处理复选框选中事件
    handleSelectionChangeDel(selection) {
this.selectedIds = selection.map(item => item.s_RIndex);
if (selection && selection.length > 0) {
      const selectedRow = selection[0]; // 获取选中的第一行数据
      this.selectedPOIndex = selectedRow.s_RIndex; // 获取选中行的编号
    } else {
      this.selectedPOIndex = ''; // 如果没有选中行，则清空选中行的编号
    }
    this.selectedRows = selection;//无法删除已审核的数据
     console.log(this.selectedIds);
     console.log( this.selectedPOIndex);
},
      jhth(){
$http.post("api/Salesreturn/Add1", {
  s_RReturnOrder: this.orderNumber,
  s_RDocumentStatus: '待审核',
  s_RReturnDate: this.AddForm.thdate,
  s_RSalesOrder: this.AddForm.thdh,
  s_RCustomerName: this.AddForm.thgys,
  s_RContactPerson: this.AddForm.thlxr,
  s_RContactInformation:this.AddForm.thphone,
  s_RSalesDepartment: this.AddForm.thbm,
  s_RSalesRepresentative: this.AddForm.thr,
  s_RReturnQuantity: this.totalQuantity,
  s_RReturnAmount: this.totalAmount,
  s_RReturnedItems: this.concatenatedProductNames,
  s_RCreator:'admin',
  s_RDepartment: '销售部',
  s_RCreationTime: new Date(), // 使用正确的日期变量
  s_RApprover: null, 
  s_RApproverTime: null, 
  p_Reviewcomments: null,
  s_RReamr:this.AddForm.thbz
})
.then(res => {
  if (res) { // 注意这里应该判断 res.data 而不是 res
    this.$message({
      message: '添加成功！',
      type: 'success'
    });
    this.searchData();
         this.Qu();
  } else {
    this.$message({
      message: '添加失败！',
      type: 'error' // 应该是 error 类型
    });
  }
})
.catch(error => {
  console.error('请求失败:', error);
  this.$message.error('请求失败，请稍后重试！');
});
      },
      Jhthmx(){//添加到退货明细表
        const promises = this.thmxdata.map(row => {
  const postData = {
    sr_ProductName: row.sr_ProductName,
    sr_ProductCode: row.sr_ProductCode,
    sr_ProductType: row.sr_ProductType,
    sr_Specification: row.sr_Specification,
    sr_Unit: row.sr_Unit,
    sr_SalesQuantity: row.sr_SalesQuantity,
    sr_ReturnQuantity: row.sr_ReturnQuantity,
    sr_UnitPrice: row.sr_UnitPrice,
    sr_ReturnAmount: (row.sr_ReturnQuantity || 0) * (row.sr_UnitPrice || 0),
    sr_Remarks: row.sr_Remarks,
    s_RReturnOrder: this.orderNumber
  };

  return $http.post("api/Salesreturn/Add", postData)
    .then(res => {
      return res;
    })
    .catch(error => {
      console.error('添加失败:', error);
      throw new Error('添加失败');
    });
});

Promise.all(promises)
  .then(results => {
    const isSuccess = results.every(res => res);
    if (isSuccess) {
      this.$message({
        message: '添加成功！',
        type: 'success'
      });
    } else {
      this.$message({
        message: '添加失败！',
        type: 'error'
      });
    }
  })
  .catch(() => {
    this.$message.error('添加失败，请稍后重试！');
  });
      },
      cancel(){//取消
        this.thmxdata = []; // 清空显示数据数组
      this.thqx = false; // 关闭弹窗
      },
      rhsaveData(){//保存
        this.$refs.AddForm.validate((valid) => {
    if (valid) {
                // 生成编号
 this.orderNumber = this.generateCode();
         this.jhth();
         this.Jhthmx();
         this.thqx=false;
         this.searchData();
         this.Qu();
    } else {
      // 表单验证失败，可以在这里进行相应的提示或处理
    }
  });
 
      },
      checkQuantity(row) {
    // 获取销售数量
    const quantity = row.sr_SalesQuantity;
    // 获取本次销售数量
    const inputQuantity = row.sr_ReturnQuantity;

    // 如果本次入库数量大于进货数量，则提示错误并将输入框置空
    if (inputQuantity > quantity) {
      this.$message.error('本次退货数量不能大于销售数量');
      row.sr_ReturnQuantity = '';
    }
  },
      // 处理复选框选中状态改变事件
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
      //出库明细添加货品确认
      hpForm() {
        const selectedRows = this.$refs.tableName.selection; // 获取所有选中的行数据
      // 检查是否至少选择了一行
      if (selectedRows.length > 0) {
        // 遍历选中的每一行数据
        selectedRows.forEach(row => {
          // 将选中行数据添加到显示数据数组中
          this.thmxdata.push({
            sr_SerialNumber: this.thmxdata.length + 1, // 序号为当前数组长度加1
            sr_ProductName: row.s_DProductName,
            sr_ProductCode: row.s_DProductNumber,
            sr_ProductType: row.s_DProductType,
            sr_Specification: row.s_DSpecifications,
            sr_Unit: row.s_DUnit,
            sr_SalesQuantity:row.s_DQuantitySold,
            sr_ReturnQuantity:null,
            sr_UnitPrice: row.s_DUnitPrice,
            sr_ReturnAmount:null,
            sr_Remarks:null,
            s_RReturnOrder:0,
          });
        });
        
        // 关闭弹窗
        this.tjhp = false;
      } else {
        // 提示用户至少选择一行数据
        this.$message.warning('请至少选择一行数据！');
      }
 
},
        MxAdd(){
          this.tjhp=true;
          this.HoupQu();
        },
        //销售明细查询的全部
      HoupQu(){
            $http.get(`api/Salesorderdetail/Qu?dh=${this.AddForm.thdh}`,{              
            }).then((response)=>{
               this.xsdata=response;
            }).catch((error)=>{
               console.log(error);
               
            })
      },
        JhgysForm()//关联单号选择进货单号确认
      {
    if (this.selectedRows.length === 0) {
      this.$message.error('请选择进货单');
      return;
    }

    // 假设只选择了一行数据
    const selectedRow = this.selectedRows[0];
  
      this.AddForm.thdh = selectedRow.s_OSalesOrder; 
      this.AddForm.thgys = selectedRow.s_OCustomerName; 
      this.AddForm.thlxr = selectedRow.s_OContactPerson; 
      this.AddForm.thphone = selectedRow.s_OContactInformation; 
      this.AddForm.thbm = selectedRow.s_OSalesDepartment; 
      this.AddForm.thr = selectedRow.s_OSalesRepresentative; 
    

    // 关闭模态框
    this.modalVisible = false;
  },
        handleSelectionChange1(selection) {
    // 将选中行保存到数据中
    this.selectedRows = selection;
  },
        openModal(){
           // 关联单号点击按钮时打开模态框
      this.modalVisible = true;
      this.Jgs();
        },
        Jgs(){
        $http.get('api/Outbound/Xsqu1',{              
            }).then((response)=>{
               this.Xsname=response;
              
            }).catch((error)=>{
               console.log(error);
              
            })
      },
        handleAdd(){//销售退货新增
            this.thqx=true;
        },
        //重置
chongzhi(){
      this.formInline.Number='';
      this.formInline.Status='';
      this.formInline.Kehu='';
      this.formInline.date='';
      this.formInline.date1='';
    },
    searchData() {//分页模糊查询
        // 查询数据逻辑
  const { Number, Status, Kehu, date,date1 } = this.formInline;
  $http.get('api/Salesreturn/Fye', {
    params: {
      pageSize: this.pageSize,
      currentPage: this.currentPage,
      Number: Number,
      Status: Status,
      Supplier: Kehu,
      date: date,
      date1:date1
    }
  }).then((response) => {
    this.data = response;
   
    this.handleTotalRecords();
  }).catch((error) => {
    console.log(error);
  });
      // 查询逻辑
    },
    //查询总行数
    Qu(){
      $http.get('api/Salesreturn/Qu', {
  }).then((response) => {
    this.rows = response.length;
  
  }).catch((error) => {
    console.log(error);
  });
     },
       // 处理页码变化
    handleSizeChange: function (size) {
  this.pageSize = size;
  this.searchData();
  },
    handleCurrentChange: function (page) {
  this.currentPage = page;
  this.searchData();
},
        filterTime(date) {
if (date) {
  return date.split('T')[0];
} else {
  return '';
}
},

beforeUpload(file) {
      const isImage = file.type.includes('image');
      if (!isImage) {
        this.$message.error('只能上传图片文件');
      }
      const isLt200M = file.size / 1024 / 1024 < 200;
      if (!isLt200M) {
        this.$message.error('上传文件大小不能超过200MB');
      }
      return isImage && isLt200M;
    },
     // 获取动态的上传URL
     getUploadUrl() {
      // 构建上传URL，并将this.AddForm.jindex的值添加到URL中
      return `http://localhost:5084/api/PublicAttachment/Upload?num=${this.AddForm.thindex}`;
    },
    handlePreview(file) {
  const reader = new FileReader();
  reader.onload = (e) => {
    const imageUrl = e.target.result;
    // 在这里可以使用 imageUrl 来显示预览图片
    // 例如，将 imageUrl 设置为 img 标签的 src 属性
    // 或者在模态框中显示预览图片
    console.log('预览图片:', imageUrl);
  };
  reader.readAsDataURL(file.raw);
},
handleRemove(file) {
  const index = this.fileList.indexOf(file);
  if (index !== -1) {
    this.fileList.splice(index, 1);
    // 在这里可以向服务器发送请求，删除对应的文件
    console.log('删除文件:', file.name);
  }
},

         //查询客户下拉框
       Kehuname(){
          $http.get('api/Customermanagement/Qu',{              
          }).then((response)=>{
             this.Khname=response;
          }).catch((error)=>{
             console.log(error);
            
          }) 
       },
   
    },mounted: function () {
   this.searchData();
   this.Qu();
  this.Kehuname();
},
computed: {
  totalQuantity() {
    // 计算退货数量的总和
    return this.thmxdata.reduce((total, item) => total + (parseFloat(item.sr_ReturnQuantity) || 0), 0);
   
  },
  concatenatedProductNames() {
    return this.thmxdata
      .map(item => `${item.sr_ProductName}`) // 将每个货品名称转换为所需格式
      .join('，'); // 使用逗号拼接所有转换后的货品名称
  },
  totalAmount() {
    // 计算金额的总和
    return this.thmxdata.reduce((total, item) => total + ((item.sr_ReturnQuantity || 0) * (item.sr_UnitPrice || 0)), 0);
  },
},
}
</script>

<style scoped>

</style>